<template>
	<view class="movie-page page" v-if="info">
		<view class="header">
			<image class="header-img" :src="info.thumb" v-if="!lessonSrc"></image>
			<video class="header-img" id="myVideo" :src="lessonSrc" @error="videoErrorCallback" controls
				v-if="lessonSrc"></video>
		</view>

		<view class="body">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#007aff"
					@clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 0">
					<uni-list v-for="(item, index) in lessonList" :key="index">
						<uni-list-item :title="item.title" clickable @click="lessonPlay(item)" />
					</uni-list>
				</view>
				<view v-if="current === 1">
					<view class="lesson-content">
						<rich-text :nodes="htmlNodes"></rich-text>
					</view>
				</view>
				<view v-if="current === 2">
					<uni-list v-for="(item, index) in documentList" :key="index">
						<uni-list-item :title="item.title" clickable @click="download(item)" />
					</uni-list>
				</view>
			</view>
		</view>

		<view class="footer">

		</view>
	</view>
</template>

<script>
	import htmlParser from '@/common/html-parser.js'
	export default {
		components: {},
		data() {
			return {
				items: ['目录', '详情', '课件'],
				current: 0,
				colorIndex: 0,
				info: null,
				htmlNodes: '',
				lessonList: [],
				lessonSrc: '',
				documentList: []
			}
		},
		onLoad(e) {
			const payload = e.payload;
			try {
				this.info = JSON.parse(decodeURIComponent(payload));
			} catch (error) {
				this.info = JSON.parse(payload);
			}
			uni.setNavigationBarTitle({
				title: this.info.title
			});
			this.getLesson()
			this.getDocument()
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			getLesson() {
				this.$store.dispatch('request', {
					url: `course/${this.info.id}/lesson`
				}).then((res) => {
					this.lessonList = res.data
				})
			},
			lessonPlay(item) {
				// #ifndef MP-ALIPAY
				this.videoContext = uni.createVideoContext('myVideo')
				// #endif

				this.lessonSrc = item.video_url
				var htmlString = item.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");
				this.htmlNodes = htmlParser(htmlString);
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getDocument() {
				this.$store.dispatch('request', {
					url: `course/${this.info.id}/document`
				}).then((res) => {
					this.documentList = res.data
				})
			},
			download(item) {
				uni.downloadFile({
				    url: item.filepath,
				    success: (res) => {
				        if (res.statusCode === 200) {
				            console.log('下载成功');
				        }
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.header-img {
		width: 100%;
	}

	.lesson-content {
		padding: 0 30rpx;
		overflow: hidden;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}

	.footer {
		position: absolute;
		bottom: 50upx;
		width: 100%;

		.buy {
			border-radius: 40upx;
		}
	}
</style>
